<template>
    <a-row>
        <a-col :span="24" class="icons-list">
            <HomeOutlined :style="{fontSize:'32px',color:'#08c'}"/>
            <SettingFilled/>
            <SmileOutlined/>
            <SyncOutlined spin/>
            <SmileOutlined :rotate="180"/>
            <LoadingOutlined/>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24" class="custom-icons-list">
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24" class="icons-list">
            <icon-font type="icon-tuichu"/>
            <icon-font type="icon-facebook"/>
            <icon-font type="icon-twitter"/>
        </a-col>
    </a-row>

    <a-row>
        <a-col :span="24">
            <SmileTwoTone/>
            <HeartTwoTone twoToneColor="#eb2f96"/>
            <CheckCircleTwoTone twoToneColor="#52c41a"/>
        </a-col>
    </a-row>
</template>

<script>
    import {
        createFromIconfontCN,
        SmileTwoTone,
        HeartTwoTone,
        CheckCircleTwoTone,
    } from '@ant-design/icons-vue';
    import {Row, Col} from 'ant-design-vue'

    const IconFont = createFromIconfontCN({
        scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
    })


    import {
        HomeOutlined,
        SettingFilled,
        SmileOutlined,
        SyncOutlined,
        LoadingOutlined,
    } from '@ant-design/icons-vue'

    export default {
        name: "Icon",
        components: {
            ARow: Row,
            ACol: Col,
            HomeOutlined,
            SettingFilled,
            SmileOutlined,
            SyncOutlined,
            LoadingOutlined,
            IconFont,
            SmileTwoTone,
            HeartTwoTone,
            CheckCircleTwoTone,
        }
    }
</script>

<style lang="less" scoped>
    .icons-list ::v-deep(.anticon) {
        margin-right: 6px;
        font-size: 24px;
    }

    .custom-icons-list {
        margin-right: 6px;
    }
</style>
